import React, {Component, PropTypes} from 'react';
import {DropTarget} from 'react-dnd';
import ItemTypes from './ItemTypes';

import './Dustbin.less';

const boxTarget = {
  drop() {
    return {name: 'Dustbin'};
  }
};

function connect(connect, monitor) {
  return {connectDropTarget: connect.dropTarget(), isOver: monitor.isOver(), canDrop: monitor.canDrop()}
}

const Dustbin = (props) => {
  const {canDrop, isOver, connectDropTarget} = props;

  return connectDropTarget(<div className="dustbin"/>);
}

Dustbin.propTypes = {
  connectDropTarget: PropTypes.func.isRequired,
  isOver: PropTypes.bool.isRequired,
  canDrop: PropTypes.bool.isRequired
};

export default DropTarget(ItemTypes.BOX, boxTarget, connect)(Dustbin);
